<template>
  <el-submenu :index="item.id">
    <template slot="title">
      <i :class="item.icon" v-if="item.icon"></i>
      <span>{{ item.name }}</span>
    </template>
    <component :is="componentId(jone)" v-for="jone in item.children" :key="jone.id" :item="jone" />
  </el-submenu>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import oneMenu from './onemenu.vue'
import { MenuItem } from '@/types/index.ts'

@Component({
  name: 'groupmenu',
  components: {
    oneMenu
  }
})
export default class GroupMenu extends Vue {
  @Prop() private item!: MenuItem
  private componentId(data: MenuItem) {
    return data.children && data.children.length > 0 ? 'groupmenu' : 'oneMenu'
  }
}
</script>

<style lang="stylus" scoped></style>
